<template>
  <el-form label-width="140px" label-position="left" style="margin-left: 25px;">
    <div style="margin-bottom: 20px;">
      <span style="color: #ccc" >建议只留1台设备/服务商来自动接单，多处开启自动接单可能遇到接单后不打印情况</span>
    </div>
   <div style="width:538px;display:flex;justify-content:space-between;margin-bottom:20px;    font-size: 15px;
    font-weight: 600;
    color: rgb(96, 98, 102);">
     <div>
       <span>启用自动接单:</span>
      <el-switch v-model="user.shippingMethod" :active-value="1" :inactive-value="0"/>
     </div>
     <div>
       <span>启用到店提货: </span>
       <el-switch v-model="shopswitch" @change="shopswitchchange" />
     </div>
     <div>
       <span>启用同城配送:</span>
        <el-switch v-model="samecity" @change="samecitychchange" />
     </div>

   </div>
    <div  style="display:flex;justify-content: flex-start;">
    <el-form-item label="最低起送金额">
      <div style="display: flex;">
      <el-input
        type="Number"
        v-model.trim="user.minimumDelivery"
        style="width:80px;"
      />
      <span style="margin-left: 10px;">元</span>
      </div>
    </el-form-item>
    <el-form-item label="同城配送方式"  v-if="samecity == true" style="margin-left: 154px;">
        <el-select
          v-model="user.riderPluginId"
          placeholder="请选择"
          @change="deliverylistchange"
          v-if="samecity == true"
          style=""
        >
          <el-option
            v-for="item in deliverylist"
            :key="item.pluginId"
            :label="item.name"
            :value="item.pluginId"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </div>
   <div style="display:flex">
      <el-form-item label="请选择上班时间">
        <el-time-picker
          v-model="shippingDate.workBeginTime"
          value-format="HH:mm:ss"
          @change="changworkBeginTime"
        />
      </el-form-item>

      <el-form-item label="请选择下班时间" style="margin-left:40px">
        <el-time-picker
          v-model="shippingDate.workEndTime"
          value-format="HH:mm:ss"
          @change="changworkEndTime"
        />
      </el-form-item>
   </div>
  <div  style="display: flex">
    <el-form-item label="承诺送达时间" >
      <el-select
        v-model="shippingDate.shippingTime"
        placeholder="请选择"
        style="width: 223px"
        @change="shippingTimechange"
      >
        <el-option
          v-for="item in reachDateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="预约时间设置"  style="margin-left:40px">
      <el-select
        v-model="shippingDate.shippingmake"
        placeholder="请选择"
        style="width: 223px"
      >
        <el-option
          v-for="item in appointment"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
  </div>
      <el-form-item label="高峰时段发货时长" class="shippingMethod">
      <div style="width: 100%;display: flex;justify-content: initial">
      <el-time-picker placeholder="开始时间" v-model="row1.reach[0]" value-format="HH:mm:ss">
      </el-time-picker>
      <span style="margin-left: 10px">至</span>
      <el-time-picker placeholder="结束时间" v-model="row1.reach[1]" style="margin-left: 10px"  value-format="HH:mm:ss" >
      </el-time-picker>
      <el-select v-model="row1.reachTime" placeholder="送达时间" style="margin-left: 10px" >
        <el-option
          v-for="item in reachDateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      </div>
       <div style="margin-top:20px;width: 100%;display: flex;justify-content: initial">
       <el-time-picker placeholder="开始时间" v-model="row2.reach[0]" value-format="HH:mm:ss">
      </el-time-picker>
      <span style="margin-left: 10px">至</span>
      <el-time-picker placeholder="结束时间"  v-model="row2.reach[1]" style="margin-left: 10px"  value-format="HH:mm:ss" >
      </el-time-picker>
      <el-select v-model="row2.reachTime" placeholder="送达时间" style="margin-left: 10px" >
        <el-option
          v-for="item in reachDateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
       </div>
    </el-form-item>
    <el-form-item>
      <el-button
        :loading="loading"
        type="primary"
        @click.native.prevent="submit"
        v-permission="['parameter.edit']"
        >修改</el-button
      >
    </el-form-item>
  </el-form>
</template>
<script>
import { getInfo, update } from "@/api/sysSetUp";
import permission from "@/directive/permission/index.js"; // 权限判断指令
export default {
  // props: ["shippingDate"],
  directives: { permission },
  data() {
    return {
      shippingmake:"",
      time: "",
      deliverylist: [
        {
          name: "商家自送",
          pluginId: "shopDeliverPlugin",
        },
      ],
      shopswitch: false,
      samecity: false,
      loading: false, // 按钮防双击
      reachDayOptions: [
        {
          value: 0,
          label: "今天",
        },
        {
          value: 1,
          label: "明天",
        },
        {
          value: 2,
          label: "后天",
        },
      ],
      reachDateOptions: [
        {
          value: 15,
          label: "15分钟",
        },
        {
          value: 30,
          label: "30分钟",
        },
        {
          value: 45,
          label: "45分钟",
        },
        {
          value: 60,
          label: "1小时",
        },
        {
          value: 120,
          label: "2小时",
        },
        {
          value: 180,
          label: "3小时",
        },
        {
          value: 240,
          label: "4小时",
        },
        {
          value: 300,
          label: "5小时",
        },
        {
          value: 360,
          label: "6小时",
        },
        {
          value: 420,
          label: "7小时",
        },
        {
          value: 480,
          label: "8小时",
        },
        {
          value: 540,
          label: "9小时",
        },
        {
          value: 600,
          label: "10小时",
        },
        {
          value: 660,
          label: "11小时",
        },
        {
          value: 720,
          label: "12小时",
        },
        {
          value: 780,
          label: "13小时",
        },
        {
          value: 840,
          label: "14小时",
        },
        {
          value: 900,
          label: "15小时",
        },
        {
          value: 960,
          label: "16小时",
        },
        {
          value: 1020,
          label: "17小时",
        },
        {
          value: 1080,
          label: "18小时",
        },
        {
          value: 1140,
          label: "19小时",
        },
        {
          value: 1200,
          label: "20小时",
        },
        {
          value: 1260,
          label: "21小时",
        },
        {
          value: 1320,
          label: "22小时",
        },
        {
          value: 1380,
          label: "23小时",
        },
        {
          value: 1440,
          label: "24小时",
        },
        {
            value: 2880,
          label: "两天",
        },
        {
           value: 4320,
          label: "三天",
        }
      ],
       appointment:[
         {
           label:'不支持',
           value:0
         },
           {
           label:'今天',
           value:1
         },
            {
           label:'两天',
           value:2
         },
            {
           label:'三天',
           value:3
         }
       ],
      user: {},
      arrarone: "",
      arrartwo: "",
      shippingDate: {
        workBeginTime: "00:00:00",
        workEndTime: "00:00:00",
        shippingTime:15,
        speed:[],
        shippingmake:""
      },
      row1: { reach: ["00:00:00", "00:00:00"], reachDay: 0, reachTime: 15 },
      row2: { reach: ["00:00:00", "00:00:00"], reachDay: 0, reachTime: 15 },
    };
  },
  created() {
    this.getInfo();
  },
  methods: {

    shippingTimechange(val) {
      console.log(val);
      this.shippingDate.shippingTime = val;
      console.log(this.shippingDate);
    },
    changworkBeginTime(val) {
      console.log(val);
      this.shippingDate.workBeginTime = val;
    },
    changworkEndTime(val) {
      console.log(val);
      this.shippingDate.workEndTime = val;
    },
    deliverylistchange(val) {
      console.log(val);
      this.user.riderPluginId = val;
    },
    samecitychchange(val) {
      console.log(val);
      if (val == false) {
        this.arrartwo = "";
      } else {
        this.arrartwo = "2";
      }
      this.user.deliverMethod = this.arrartwo + this.arrarone;
    },
    shopswitchchange(val) {
      console.log(val);
      if (val == false) {
        this.arrarone = "";
      } else {
        this.arrarone = "1";
      }
      this.user.deliverMethod = this.arrartwo + this.arrarone;
    },
    getInfo() {
      getInfo()
        .then((res) => {
          this.user = res.data;
          console.log(this.user.mchId);
          if (this.user.shippingConfig != null) {
              this.shippingDate = JSON.parse(this.user.shippingConfig);
          }else {
            this.shippingDate = {
            workBeginTime: "00:00:00",
            workEndTime: "23:59:59",
            speed: [],
            shippingTime:15,
            shippingmake:''
          }
          }


       if(this.shippingDate.speed!=null){

       if (this.shippingDate.speed.length>0) {
          this.row1 = this.shippingDate.speed[0]
        }
         if(this.shippingDate.speed.length>1){
          this.row2= this.shippingDate.speed[1]
        }
        }else{
        this.$set(this.shippingDate, "speed", [])
        }

        if(this.shippingDate.shippingTime==null){
         this.$set(this.shippingDate, "shippingTime", 15)
        }
        if(this.shippingDate.shippingTime==""){
          this.shippingDate.shippingTime=15
        }

         if(this.shippingDate.shippingmake==null){
         this.$set(this.shippingDate, "shippingmake", '')
        }


          if (
            res.data.deliverMethod == null ||
            res.data.deliverMethod == "" ||
            res.data.deliverMethod == undefined
          ) {
            this.shopswitch = false;
            this.samecity = false;
            this.arrarone = "";
            this.arrartwo = "";
          } else {
            if (this.user.deliverMethod.indexOf("1") !== -1) {
              this.shopswitch = true;
              this.arrarone = "1";
            }
            if (this.user.deliverMethod.indexOf("2") !== -1) {
              this.samecity = true;
              this.arrartwo = "2";
            }
          }


        })
        .catch((err) => {
          console.log(err);
        });
     },
    submit() {
        this.loading = true;
        this.shippingDate.speed=[]
        this.shippingDate.speed.push(this.row1)
        this.shippingDate.speed.push(this.row2)
        this.user.shippingConfig = JSON.stringify(this.shippingDate);
        update(this.user)
          .then((res) => {
            console.log(res);
            this.loading = false;
            this.$message.success("修改成功");
            this.getInfo()
          })
          .catch(() => {
            this.loading = false;
          });

    },
  },
};
</script>

<style lang="scss" scoped>
.shippingMethod {
  .el-table th.is-leaf {
    padding-top: 0px !important;
  }
}

.switch {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 33%;
    min-width: 33%;
    max-width: 33%;
    &:nth-child(2n) {
      margin-left: 50px;
    }
  }
}
.shippingMethod {
  position: relative;
  .addItem {
    position: absolute;
    bottom: 7px;
    left: -30px;
    font-size: 20px;
  }
}
/deep/.cell {
  display: flex;
  align-items: center;
}
</style>
